<template>
  <div>
    <div class="tableFiltersWrap">
      <el-row class="txt-right">
        <el-col>
          <v-form :fields="fields" :fieldsData="tableParams">
            <el-col :span="4" class="txt-left">
              <el-button type="primary" @click="fecthData">查询</el-button>
              <el-button type="default" @click="reloadData">清空</el-button>
            </el-col>
          </v-form>
        </el-col>
      </el-row>
    </div>
    <v-page>
      <el-card shadow="never" class="card-header-tabs">
        <div slot="header" class="clearfix">
          <div class="txt-right fn-pr15">
            <v-export-btn2 :download="exportList" :columns="columns" fileName="预算流水" type="default"></v-export-btn2>
          </div>
        </div>
        <div class="text item">
          <basic-table ref="basicTable" :columns="columns" :call-server="callServer" @selectionChange="selectionChange" :height="height"
            v-model="tableParamsCopy"></basic-table>
        </div>   
      </el-card>
    </v-page>
  </div>
</template>

<script>
import { list, exportList } from '#/api/budgetFlow';
import basicTable from "_c/tables";

export default {
  components: {
    basicTable,
  },
  created() {
    window.addEventListener('resize', this.handleResize);
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
  },
  data() {
    return {
      deptsListOptions: [],
      tableParams: {
        truename: "",
        username: "",
        deptid: "",
        usertype: "",
      },
      multipleSelection: [],
      form: {
        dels: '',
        ids: '',
        radio: '0',
        pwd: '',
      },
      currentItem: {},
      height: window.innerHeight - 320
    };
  },
  computed: {
    tableParamsCopy() {
      const params = {};
      if (this.tableParams.year) {
        params.year = this.tableParams.year.substring(0, 4);
      }
      return params;
    },
    fields() {
      return [
        {
          label: "",
          prop: "year",
          type: "date",
          dType: "year",
          span: 4,
          placeholder: "请选择年份",
        },
      ]
    },
    columns() {
      return [
        {
          label: "自然年",
          prop: "year",
          width: 80
        },
        {
          label: "流水编号",
          prop: "flowNo",
          width: 80
        },
        {
          label: "基金类型",
          prop: "fundType"
        },
        {
          label: "部门/中心",
          prop: "deptName",
        },
        {
          label: "流水类型",
          prop: "flowType"
        },
        {
          label: "变化额度",
          prop: "changeLimit",
          render: (h, row) => {
            return (
              <div class="bhed">{ row.changeLimit && row.changeLimit.toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                })}</div>
            );
          }
        },
        {
          label: "创建时间",
          prop: "createTime"
        },
      ]
    }
  },
  methods: {
    handleResize() {
      this.height = window.innerHeight - 320;
    },
    callServer() {
      return list;
    },
    fecthData() {
      this.$refs.basicTable.fecthData();
    },
    reloadData() {
      this.tableParams = {}
      this.$refs.basicTable.reload();
    },
    exportList(columns, filename) {
      exportList({ ...this.tableParams, excelDtos: columns }, filename);
    }
  },
};
</script>

<style lang="scss">
.bhed {
  height: 40px;
  display: flex;
  align-items: center;
}
</style>